<template>
  <li class="article-item fx-h-c">
    <div class="wrap">
      <div class="msg cs">
        <span class="author ofh">{{ article.author }}</span> ·
        <span class="time">{{ article.historyTime }}</span> ·
        <span class="article-sort">{{ article.sort }}</span>
      </div>
      <div class="article-name ofh">
        <router-link :to="{ name: 'detail', params: { id: article.id } }"
          v-html='article.title'>
          <!-- {{ article.title }} -->
        </router-link>
      </div>
      <div class="agree-and-comment fx-h-c">
        <Ico @add="handleAdd(article.userId)" :styles="styles">
          <a-icon type="like" theme="filled" />
          <span class="count">{{ article.agree }}</span>
        </Ico>
        <Ico>
          <a-icon type="message" theme="filled" />
          <span class="count">{{ commentCount }}</span>
        </Ico>
      </div>
    </div>
    <div class="img" v-if='article.article_img'>
      <img :src="article.article_img" alt="">
    </div>
  </li>
</template>

<script>
import Ico from "@/components/main/MainComponents/article/Ico";
import { addAgree } from "@/api/article";
export default {
  name: "ArticleItem",
  props: {
    article: {
      type: Object,
      default: () => ({}),
    },
    i: {
      type: Number,
    },
  },
  components: {
    Ico,
  },
  data() {
    const isAgree = !!this.article.agreeUsers.find(
      (item) => item.id === this.article.currentUserId
    );
    return {
      commentCount: 0,
      defaultAgree: isAgree,
      styles: isAgree
        ? {
            color: "#1dc400",
          }
        : { color: "#b2bac2" },
    };
  },
  methods: {
    // 点赞，可能是点赞，也可能是取消点赞
    async handleAdd(userId) {
      if (!this.defaultAgree) {
        // 点赞
        const r = await addAgree(this.article.id, 1, userId);
        if (r.code == 1) {
          this.$emit("addAgree", { num: 1, key: this.i });
          // this.agreeCount++;
          this.defaultAgree = true;
          this.styles = {
            color: "#1dc400",
          };
        } else {
          this.$message.error("点赞失败");
        }
      } else {
        // 取消点赞
        const r = await addAgree(this.article.id, -1, userId);
        if (r.code == 1) {
          this.$emit("addAgree", { num: -1, key: this.i });
          this.defaultAgree = false;
          this.styles = { color: "#b2bac2" };
        } else {
          this.$message.error("点赞失败");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.article-item {
  height: 12rem;
  padding: 2rem;
  justify-content: space-between;
  border-bottom: 1px solid #eaeaea;
  .wrap {
    width: 55rem;
  }
  .img {
    img {
      width: 6rem;
      height: 6rem;
    }
  }
  .msg {
    font-size: 1.3rem;
    color: #b2bac2;
    .author {
      display: inline-block;
      max-width: 10rem;
      &:hover {
        color: #007fff;
      }
    }
  }
  .article-name {
    margin: 1rem 0;
    a {
      color: inherit;
      font-size: 1.8rem;
      font-weight: bold;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .agree-and-comment {
    .count {
      margin-left: 0.5rem;
    }
  }
}
</style>